<!-- 季度考核  启动 -->
<template>
  <div class="start_content">
    <a-card title="季度考核向导" :headStyle="{ fontSize: '24px' }" style="margin-bottom: 16px">
      <a-steps>
        <a-step status="process" v-for="item in steps" :key="item.title" :title="item.title" />
      </a-steps>
    </a-card>
    <a-card>
      <div class="form_content">
        <div class="form_title">季度考核流程启动</div>
        <a-spin :spinning="loading" style="width: 50%; margin: 0 auto">
          <BasicForm @register="registerForm" />
          <div class="z-box-bottom-button offset-20" style="margin-top: 30px">
            <div class="start_btn">
              <a-button type="primary" @click="onSubmit">启动</a-button>
            </div>
          </div>
        </a-spin>
      </div>
    </a-card>
  </div>
</template>

<script lang="ts" name="emp-team-checkIn1-Start1" setup>
  // @ts-nocheck
  import { ref,onMounted,watch,unref } from 'vue';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { basicFormSchema } from './start.data';
  import { start } from './api';
  import { selectSuperDepartTreeList } from '/@/api/common/api';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { usePermission } from '/@/hooks/web/usePermission';
  import { BoxPlotFilled } from '@ant-design/icons-vue';
  const { hasPermission } = usePermission();
  // 轻提醒
  const { createMessage: $message } = useMessage();
  let allDepartList = [];

  const steps = [
    {
      title: '绩效经理人发布月度考核结果',
    },
    {
      title: '绩效经理人季度考核评价',
    },
    {
      title: '绩效管理员月度考核结果汇总发布',
    },
  ];

  const emit = defineEmits(['success']);
  const props = defineProps({
    data: { type: Object, default: () => ({}) },
    rootTreeData: { type: Array, default: () => [] },
  });
  // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
  const loading = ref<boolean>(false);
  // 当前是否是更新模式
  // 当前的弹窗数据
  const model = ref<object>({});

  //注册表单
  const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
    schemas: basicFormSchema,
    showActionButtonGroup: false,
  });

  const hanldeDepart = (arr) => {
    arr.forEach((item) => {
      if (item.children?.length > 0) {
        allDepartList.push(item.orgCode);
        hanldeDepart(item.children);
      } else {
        allDepartList.push(item.orgCode);
      }
    });
  };

  onMounted(() => {
    // data 变化，重填表单
    selectSuperDepartTreeList().then((res) => {
      allDepartList = [];
      hanldeDepart(res);
    });
    watch(
      () => props.data,
      async () => {
        let record = unref(props.data);
        if (typeof record !== 'object') {
          record = {};
        }
        model.value = record;
        await resetFields();
        await setFieldsValue({ ...record });
      },
      { deep: true, immediate: true }
    );
  });

  // 提交事件
  async function onSubmit() {
    try {
      loading.value = true;
      let values = await validate();
      values = Object.assign({}, model.value, values);
      let selectDepartList = values.assessPerson.split(',');
      if (selectDepartList.length == allDepartList.length) {
        values.assessPerson = '';
      }
      //提交表单
      await start(values).then((res) => {
        if (res) {
          //刷新列表
          emit('success');
        }
      });
    } finally {
      loading.value = false;
    }
  }

  let obj = {
    result: 'ok',
    taskid: 'xxxx',
    text_coordinates: [],
    angle: 0,
    orientation: 90,
  };
</script>

<style lang="less" scoped>
  .start_content {
    // padding: 16px;
  }
  .form_title {
    text-align: center;
    font-size: 32px;
    font-weight: bold;
    padding: 8px 0 48px 0;
  }
  .form_content {
    :deep .ant-spin-container {
      width: 50%;
      margin: 0 auto;
    }
    :deep .ant-picker {
      width: 100%;
    }
  }
  .start_btn {
    padding: 10px 16px;
    text-align: center;
    margin-bottom: 16px;
  }
</style>
